<template>
    <div class="tab-bar">
          <router-link  class="tab-item" to="/home">
             <van-icon  size="22"  name="music-o" />
              <span>发现</span> 
          </router-link>
            <router-link  class="tab-item" to="/geats">
            <van-icon size="22" name="service-o" />
              <span>播客</span> 
          </router-link>
            <router-link class="tab-item" to="mine"> 
              <van-icon size="22" name="user-o" />
              <span>我的</span> 
          </router-link>
            <router-link  class="tab-item" to="flower">
              <van-icon size="22" name="friends-o" />
              <span>关注</span> 
          </router-link>
            <router-link class="tab-item" to="country">
              <van-icon size="22" name="wap-home-o" />
              <span>云村</span> 
          </router-link>
      </div>
</template>



<script>
export default {
    name:'tabBar'
}
</script>


<style scoped lang="css">
#app{
  height: 100%;
  width: 100%;
  color: #000000;
}

.tab-bar{
    display: flex;
    border-radius: 3px;
    /* margin-bottom: 10px; */
    position: fixed;
    border-bottom: 1px solid #eeeeee;
    align-content: center;
    width: 100%;
    /* height: 100%; */
    bottom: -3px;
    padding: 10px;
    border-top: 1px solid #eeeeee;
    z-index:10;
    background-color: #fff;
}
.tab-item{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    color: #000000;

}
span{
    text-align: center;
    font-size: 12px;
}
.van-icon{
  display: flex;
  justify-content: center;
}
.router-link-exact-active span{
  color: #ee0a24;
}
.router-link-exact-active .van-icon{
  color: #ee0a24;

}

</style>
